<template>
  <div>
    <a-card>
      <a-form layout="inline">
        <a-form-item label="账号">
          <a-input placeholder="请输入账号" :style="{ width: '300px' }" v-model:value="pageData.queryParams.username" />
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input placeholder="请输入邮箱" :style="{ width: '300px' }" v-model:value="pageData.queryParams.email" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input placeholder="请输入手机号" :style="{ width: '300px' }" />
        </a-form-item>
        <a-button type="primary" @click="queryData()" class="mr-2"> 查询 </a-button>
        <a-button type="info"> 重置 </a-button>
      </a-form>
      <div class="table-operations">
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <plus-outlined />
          </template>
          添加用户
        </a-button>
        <a-button @click="handleBatchDel">
          <template #icon>
            <delete-outlined />
          </template>
          批量删除
        </a-button>
      </div>
      <a-table
        size="middle"
        rowKey="id"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        :pagination="false"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'roles'">
            <span>
              <a-tag v-for="tagKey in record.roles" :key="tagKey">
                {{ tagKey }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-button type="link" size="small" v-permission:disabled="'system_user_upd'" @click="handleEdit(record)"> 编辑 </a-button>
            <a-popconfirm title="确认重置密码吗?" ok-text="确认" cancel-text="取消" @confirm="handleResPwd(record)">
              <a-button type="link" size="small" v-permission:disabled="'system_user_res_password'"> 重置密码 </a-button>
            </a-popconfirm>
            <a-popconfirm title="确认禁用吗?" ok-text="确认" cancel-text="取消" @confirm="handleDisabled(record)">
              <a-button type="link" size="small" v-permission:disabled="'system_user_dis'"> 禁用 </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
      <div class="page-pagination">
        <a-pagination
          class="pagination"
          v-model:current="pageData.queryParams.page"
          v-model:page-size="pageData.queryParams.size"
          :defaultPageSize="pageData.queryParams.size"
          :page-size-options="['10', '20', '50', '100']"
          :total="total"
          showLessItems
          showSizeChanger
          @change="queryData"
          @showSizeChange="queryData"
        />
      </div>
    </a-card>
    <a-drawer
      placement="right"
      v-model:open="dialog.visible"
      :title="dialog.title"
      :width="502"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="closeModal"
    >
      <template #header> {{ dialog.title }} </template>
      <template #footer>
        <a-button type="primary" :loading="dialog.submitting" @click="confirmForm">提交</a-button>&nbsp;
        <a-button>重置</a-button>
      </template>
      <a-spin :spinning="dialog.loading">
        <a-form ref="formRef" label-placement="left" :label-col="{ span: 4 }" :model="pageData.form" :rules="pageData.rules">
          <a-form-item label="用户名" name="username">
            <a-input v-model:value="pageData.form.username" placeholder="输入用户名" :disabled="!pageData.form.id" />
          </a-form-item>
          <a-form-item label="显示昵称" name="nickname">
            <a-input v-model:value="pageData.form.nickname" placeholder="输入昵称" />
          </a-form-item>
          <a-form-item label="邮箱" name="email">
            <a-input v-model:value="pageData.form.email" placeholder="输入邮箱" />
          </a-form-item>
          <a-form-item :span="24" label="部门" name="departmentId">
            <a-tree-select :tree-data="treeData" v-model:value="pageData.form.departmentId" clearable />
          </a-form-item>
          <a-form-item label="角色" name="roleIds">
            <a-select v-model:value="pageData.form.roleIds" :options="roleOptions" mode="multiple" clearable />
          </a-form-item>
        </a-form>
      </a-spin>
    </a-drawer>
    <UserPasswordDialog ref="userPasswordDialog" />
  </div>
</template>
<script lang="ts" setup name="system_user">
  import { reactive, ref, onMounted } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import userApi from '/@/api/system/user';
  import roleApi from '/@/api/system/role';
  import deptApi from '/@/api/system/department';
  import UserPasswordDialog from './userPasswordDialog.vue';
  import { PageData, DialogOption } from '/@/types/global';
  import { UserVO, UserForm, UserQuery } from '/@/api/system/user/types';

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '邮箱',
      key: 'email',
      dataIndex: 'email',
    },
    {
      title: '角色',
      key: 'roles',
      dataIndex: 'roles',
    },
    {
      title: '创建时间',
      key: 'createDate',
      dataIndex: 'createDate',
    },
    {
      title: '操作',
      key: 'action',
    },
  ];

  const defaultForm = {
    id: undefined,
    username: '',
    nickname: '',
    email: '',
    description: '',
    status: '',
    roleIds: [],
    departmentId: undefined,
  };

  const pageData = reactive<PageData<UserForm, UserQuery>>({
    form: {
      ...defaultForm,
    },
    queryParams: {
      page: 1,
      size: 10,
      username: '',
      email: '',
    },
    rules: {
      username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
      nickname: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
      email: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      roleIds: [
        {
          type: 'array',
          required: true,
          message: '请选择角色',
          trigger: ['blur', 'change'],
        },
      ],
    },
  });
  const loading = ref(false);
  const tableData = ref<UserVO[]>([]);
  const total = ref(0);
  const queryData = async () => {
    try {
      loading.value = true;
      var { data } = await userApi.getUserList(pageData.queryParams);
      tableData.value = data.content;
      total.value = data.totalElements;
    } finally {
      loading.value = false;
    }
  };
  onMounted(() => {
    queryData();
  });

  const dialog = reactive<DialogOption>({
    visible: false,
    title: '',
    loading: false,
    submitting: false,
  });

  /**
   * 关闭表单
   */
  const closeModal = () => {
    Object.assign(pageData.form, defaultForm);
    dialog.loading = false;
  };

  const treeData = ref([]);
  async function loadDept() {
    loading.value = true;
    const { data } = await deptApi.tree();
    treeData.value = getTree(data);
    loading.value = false;
  }
  function getTree(dataList: any) {
    return dataList.map((item: any) => {
      const children = item.children ? getTree(item.children) : [];
      return {
        ...item,
        key: item.id,
        value: item.id,
        title: item.deptName,
        children: children,
        isLeaf: children.length == 0,
      };
    });
  }

  const roleOptions = ref([]);

  async function handleAdd() {
    dialog.visible = true;
    dialog.title = '新增用户';
    const roles = await roleApi.getAllRoles();
    loadDept();
    roleOptions.value = roles.data.map((r: any) => new Object({ label: r.name, value: r.id }));
  }

  async function handleEdit(record: any) {
    dialog.visible = true;
    dialog.loading = true;
    dialog.title = '编辑用户';
    const roles = await roleApi.getAllRoles();
    roleOptions.value = roles.data.map((r: any) => new Object({ label: r.name, value: r.id }));
    loadDept();
    const { data } = await userApi.getUserInfoById(record.id);
    Object.assign(pageData.form, data);
    dialog.loading = false;
  }

  const userPasswordDialog = ref();
  async function handleResPwd(record: any) {
    console.log('点击了重置密码', record);
    const { data } = await userApi.resetPassword(record.id);
    message.success('重置成功');
    userPasswordDialog.value.showModal(record.username, data);
  }

  async function handleDisabled(record: any) {
    console.log('点击了禁用', record);
    await userApi.disabledUserInfo(record.id);
    message.success('禁用成功');
    queryData();
  }

  const selectedRowKeys = ref([]);
  const onSelectChange = (rowKeys: any) => {
    console.log('selectedRowKeys changed: ', rowKeys);
    selectedRowKeys.value = rowKeys;
  };
  async function handleBatchDel() {
    Modal.confirm({
      title: '提示',
      content: '您确定要删除选中用户吗',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        console.log('点击了批量删除');
        await userApi.batchDeleteUser(selectedRowKeys.value);
        message.success('批量删除成功');
        queryData();
      },
      onCancel: () => {},
    });
  }

  const formRef = ref();
  function confirmForm(e: any) {
    e.preventDefault();
    dialog.submitting = true;
    try {
      formRef.value.validateFields().then(async () => {
        if (!pageData.form.id) {
          await userApi.addUserInfo(pageData.form);
        } else {
          await userApi.updateUserInfo(pageData.form);
        }
        message.success('保存成功');
        dialog.visible = false;
        queryData();
      });
    } finally {
      dialog.submitting = false;
    }
  }
</script>